<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>position定位</title>
	</head>
	<body>
	<!-- 	定位：一种更高经的布局手段
		通过定位可以将元素放到任意位置
		
		定位：
		1.fixed固定定位	脱离文档流
		2.relative 相对定位
		2.position 绝对定位
		设置偏移量top left right bottom
		px 百分比
		
		z-index  层叠优先级
		<style>
			.fiexd{
				width: 100px;
				height: 100px;
				background-color: red;
				position: fixed;
				top: 0;
				left: 0;
				/* left-top;right-bottom; */
				
			}
			body{
				height: 2000px;
			}
		</style>
		
		<div class="fiexd">
			
		</div>
		
		2.relative 相对定位
		需求：a,b,c把B盒子覆盖a盒子
		<!-- <style>
			/* *代表通配选择器 */
			*{
				margin: 0;
				padding: 0;
			}
			.a{
				background-color: red;
			}
			.b{
				background-color: olivedrab;
				position: relative;
				right: 16px;
			}
			.c{
				background-color: saddlebrown;
			}
			/* 公共样式 */
			.box{
				display: inline-block;
				width: 200px;
				height: 200px;
			}
			body{
				font-size: 0;
			}
			
		</style>
		relative定位 基于元素本身
		当left越大，定位元素越向右
		当right越大，定位元素越向左
		当top越大，定位元素越向下
		当bottom越大，定位元素越向上
		通常来说，仅用于辅助“绝对定位”
		
		3.绝对定位：
			定位在position的值为非static的元素身上
		static position默认值  静止
		<div class="a" box></div>
		<div class="b" box></div>
		<div class="c" box></div> --> -->
		
		3.绝对定位position:absolute
			定位在position的值为非static的元素身上
			
			口诀：“子觉父相”
		static position默认值  静止
		<style>
			.yeye{
				width: 800px;
				height: 800px;
				background-color: aqua;
				/* position: relative; */
			}
			.baba{
				width: 600px;
				height: 600px;
				background-color: blanchedalmond;
			}
			.son{
				width: 200px;
				height: 200px;
				background-color: olivedrab;
				top: 0;
				left: 0;
				z-index: 9999;
			}
			.laopo{
				width: 100px;
				height: 100px;
				background-color: beige;
				top: 0;
				left: 0;
			}
		</style>
		<div class="yeye">
			<div class="baba">
				<div class="son">
					
				</div>
			</div>
			<div class="laopo">
				
			</div>
			
		</div>
		
	</body>
</html>
